<template>
	<div class="songer">
		<div @click="chang" class="song">
			<span class="arrows">
				{{jt}}
			</span>
			<p class="songadd">创建的歌单(14)</p>
		</div>
		<div v-show="on" class="down">
			<div v-for="(item,index) in gedan" class="music2">
				<div class="music2_lef">
					<div class="lef_bg">
						<img :src="fuck[index]"/>
					</div>
				</div>
				<div class="music2_rig">
					<div class="rig_top">
						<p>{{item.name}}</p>
					</div>
					<br />
					<span class="rig_bot">{{item.trackCount}}</span>
					<div class="three">
						<img src="../../assets/img/three.png"/>
					</div>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
	import axios from 'axios'
	export default{
		name:'songer',
		data(){
			return {
				on : true,
				jt : "→",
				baseurl:'http://netease.bluej.cn',
				gedan:'',
				fuck:[]
			}
		},
		created(){
			var that = this
			axios.get(that.baseurl+"/user/playlist?uid="+that.$store.state.myId)
			.then(function(res){
				that.gedan = res.data.playlist;
				for(var i = 0; i<13; i++){
					that.fuck.push(that.gedan[i].coverImgUrl);
				}
			})
		},
		methods:{
			chang(){
				this.on = !this.on;
				if(this.on){
					this.jt = "→"
				}else{
					this.jt = "↓"
				}
			}
		}
	}
</script>

<style scoped="scoped" lang="scss">
	.song{
		width: 100%;
		height: 30px;
		background-color: #eff0f1;
		display: flex;
		.arrows{
			align-self: center;
			margin-left: 15px;
			line-height: 0;
		}
		.songadd{
			align-self: center;
			margin-left: 15px;
		}
	}
	.music2{
		width: 100%;
		height: 80px;
		margin-top: 10px;
		display: flex;
		justify-content: space-between;
		.music2_lef{
			width: 20%;
			display:flex;
			position: relative;
			justify-content: center;
			.lef_bg{
				height: 100%;
				width: 90%;
				position: absolute;
				transform: translateX(-50%);
				left: 50%;
				background-color: wheat;
				border-radius: 5px;
				overflow: hidden;
				img{
					position: absolute;
					top: 50%;
					left: 50%;
					transform: translate(-50%,-50%);
					height: 100%;
				}
			}
			.opct{
				height: 100%;
				width: 90%;
				background-color: black;
				border-radius: 5px;
				opacity: 0.6;
				img{
					width: 100%;
				}
			}
		}
		.music2_rig{
			width: 75%;
			border-bottom: 1px solid #eff0f1;
			flex-wrap: wrap;
			position: relative;
			.rig_top{
				p{
					display:flex;
					float: left;
					font-size: 20px;
					margin-top: 5px;
					span{
						color: #979798;
						margin-left: 5px;
						font-size: 14px;
						align-self: center;
					}
				}
			}
			.rig_bot{
				position: absolute;
				left: 0;
				bottom: 15px;
				color: #ccc;
				font-size: 14px;
			}
			.three{
				width: 30px;
				height: 30px;
				margin-right: 30px;
				float: right;
				img{
					height: 100%;
					transform: rotate(90deg);
				}
			}
		}
	}
</style>